<template>
  <div class="flexContent1">
    <div class="form">
      <div class="basic">基本信息</div>
      <div class="form-inner">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="仓库名称：" prop="name">
                <el-input v-clearEmoji v-model.trim="form.name" style="width: 90%;" />
              </el-form-item>
              <el-form-item label="仓库编码：" prop="code">
                <el-input v-clearEmoji v-model.trim="form.code" style="width: 90%;" />
              </el-form-item>
              <el-form-item label="仓库描述：" prop="description">
                <el-input v-clearEmoji v-model.trim="form.description" type="textarea" maxlength="500" resize="none"
                  show-word-limit style="width: 90%;" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="仓库地址：" prop="region">
                <el-cascader ref="cascaderAddr" v-model="form.selectedOptions" style="width: 90%;" :options="options"
                  placeholder="请选择地区" expand-trigger="hover" @change="handleChange" filterable />
              </el-form-item>

              <el-form-item label="详细地址：" prop="address">
                <el-input v-clearEmoji id="tipinput" v-model.trim="form.address" style="width: 90%;" />
              </el-form-item>

              <el-form-item label="仓库状态：" prop="status">
                <el-switch v-model="form.status" />
              </el-form-item>

            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="联系人：" prop="linkPerson">
                <el-input v-clearEmoji v-model.trim="form.linkPerson" style="width: 90%;" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="联系电话：" prop="linkPhone">
                <el-input v-clearEmoji v-model.trim="form.linkPhone" style="width: 90%;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="地图坐标：" prop="latitude">
                <div class="map">
                  <MapContain ref="mapRef" :input-str.sync="form.address" :latitude.sync="form.latitude"
                    :longitude.sync="form.longitude" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label-width="0" style="display: flex;justify-content: end;"> -->
          <!-- </el-form-item> -->
        </el-form>
      </div>
    </div>
    <div style="display: flex;justify-content: end;">
      <el-button class="submitBtn" style="width:88px;" @click="submitForm('form')">确定</el-button>
      <el-button class="celBtn" style="width: 88px;margin: 0px 50px;" @click="resetForm('form')">取消</el-button>
    </div>
  </div>
</template>

<script>
import MapContain from '@/components/MapContain'
import { reqAddWarehouse, reqWarehouseDetailById, reqEditWarehouse } from '@/api/warehouse'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'WarehouseAdd',
  components: { MapContain },
  data() {
    return {
      id: '',
      form: {
        name: '', // 仓库名称
        linkPerson: '', // 联系人
        code: '', // 仓库编码
        linkPhone: '', // 联系电话
        description: '', // 仓库描述
        status: false, // 仓库状态
        selectedOptions: [], // 仓库地址编码
        address: '', // 详细地址
        longitude: 113.616029, // 经度
        latitude: 34.75, // 纬度
        region: '' // 省市区
      },
      rules: {
        name: [{
          required: true,
          message: '请输入仓库名称',
          trigger: 'blur'
        }, {
          min: 0,
          max: 20,
          message: '仓库名称长度不能超过20个字符',
          trigger: 'blur'
        }],
        linkPerson: [
          {
            min: 0,
            max: 15,
            message: '联系人名称不能超过15个字符',
            trigger: 'blur'
          }, {
            pattern: /^([\u4e00-\u9fa5])+$/,
            message: '联系人只能输入汉字',
            trigger: 'blur'
          }
        ],
        code: [{
          required: true, message: '请输入仓库编码', trigger: 'blur'
        }, {
          min: 0,
          max: 20,
          message: '仓库编码长度不能超过20位数字',
          trigger: 'blur'
        }],
        linkPhone: [{
          pattern: /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }],
        description: [{
          min: 0,
          max: 500,
          message: '描述不能超过500个字符',
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: '请选择仓库状态',
          trigger: 'blur'
        }],

        address: [{
          required: true,
          message: '请输入仓库详细地址',
          trigger: 'blur'
        }, {
          min: 0,
          max: 100,
          message: '仓库详细地址不能超过100个字符',
          trigger: 'blur'
        }],
        latitude: [{
          required: true,
          message: '请选择地图坐标',
          trigger: 'blur'
        }],
        region: [{
          required: true,
          message: '请选择区域',
          trigger: 'blur'
        }]
      },
      // 级联选择器
      options: regionData,
      // 经纬度
      latitude: 34.75,
      longitude: 113.616029
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getWarehouseDetailById()
    }
  },
  methods: {
    // 获取省市区
    handleChange() {
      console.log(this.form.selectedOptions)
      const newSelectedOptions = this.form.selectedOptions.map(item => CodeToText[item])
      this.form.region = newSelectedOptions.join('/')
    },
    // 回显
    async getWarehouseDetailById() {
      const { id } = this
      const res = await reqWarehouseDetailById({ id })
      if (res.code === 200) {
        const { status, regionCode } = res.data
        this.form = { ...res.data, status: status == '0', selectedOptions: regionCode.split(','), latitude: res.data.latitude - 0, longitude: res.data.longitude - 0 }
        this.$nextTick(() => {
          this.$refs.mapRef.initMap()
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const obj = { ...this.form, status: this.form.status ? '0' : '1' }
          const { id } = this
          let res = {}
          if (id) {
            res = await reqEditWarehouse({ id, ...obj })
          } else {
            res = await reqAddWarehouse(obj)
          }
          if (res.code === 200) {
            this.$message.success(id ? '修改成功' : '添加成功')
            this.closeTag()
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.closeTag()
    }
  }
}
</script>

<style lang="scss" scoped>
.flexContent1 {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 6px 6px 6px 6px;
  padding: 32px;
}

.form {
  flex:1;
  background: #fff;
  // border-radius: 6px 6px 6px 6px;
  // padding: 32px;

}

.map {
  height: 300px;
  width: 80%;

}

.basic {
  font-family: PingFang SC, PingFang SC;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 32px;
}
</style>
